import './index.scss';
import {FC, useContext, useEffect, useRef, useState} from "react";
import {Button, Col, ConfigProvider, Form, Input, InputRef, Row, Table} from "antd";
import {
    OptionComponentPropsInterface,
    OptionInterface,
    OptionJsonInterface
} from "../../../types/interface/form.control.interface";
import {v4 as UUID} from "uuid";


const OptionComponent: FC<OptionComponentPropsInterface> = ({json_string, valueChange}) => {

    if (json_string === undefined) return;

    // 解析初始JSON字符串
    const initialData = JSON.parse(json_string) as OptionJsonInterface;
    const [dataSource, set_data_source] = useState<OptionInterface[]>(initialData.data)

    const columns = [
        {
            title: 'value',
            dataIndex: 'value',
            width: '180px',
            key: 'value',
            render: (_: any, record: OptionInterface) => (
                <Input value={record.value}
                       onChange={(e: any) => handleValueChange(record.key, e.target.value)}
                />
            )
        },
        {
            title: '操作',
            dataIndex: 'operate',
            width: '80px',
            key: 'operate',
            render: (_: any, record: OptionInterface) => (
                <Button color="primary" variant="text" onClick={e => deleteControl(record.key)}>删除</Button>
            )
        }

    ]

    const deleteControl = (key: string) => {
        const newDataSource = dataSource.filter(item => item.key !== key);
        set_data_source(newDataSource);
        updateParentData(newDataSource);
    };

    const addRow = () => {
        const newKey = UUID();
        const newDataSource = [
            ...dataSource,
            {key: newKey, value: `新选项 ${dataSource.length + 1}`}
        ];
        set_data_source(newDataSource);
        updateParentData(newDataSource);
    };

    const handleValueChange = (key: string, newValue: string) => {
        const newDataSource = dataSource.map(item =>
            item.key === key ? {...item, value: newValue} : item
        );
        set_data_source(newDataSource);
        updateParentData(newDataSource);
    };

    const updateParentData = (newData: OptionInterface[]) => {
        const updatedValue: OptionJsonInterface = {
            ...initialData,
            data: newData
        };
        valueChange(JSON.stringify(updatedValue , null,4));
    };

    return (
        <ConfigProvider
            theme={{
                components: {
                    Table: {
                        lineWidth: 0,
                        colorLinkActive: '#fff',
                        colorLink: '#fff',
                        colorPrimary: '#fff',
                        colorLinkHover: '#fff',
                        colorPrimaryBorder: '#fff',
                        rowSelectedBg: '#fff',
                        rowHoverBg: '#fff',
                        rowSelectedHoverBg: '#fff'
                    }
                },
            }}
        >
            <Table
                <OptionInterface>
                showHeader={false}
                bordered
                dataSource={dataSource}
                columns={columns}
                pagination={false}
                rowSelection={{type: 'checkbox', columnWidth: 40}}
            />
            <Button color="primary" variant="text" onClick={addRow}>新增一行</Button>
        </ConfigProvider>
    )
}

export default OptionComponent;